<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lottie on Canvas</title>
    <!-- 引入Lottie库 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie.min.js"></script>
    <script>
      // 备用CDN加载逻辑
      if (typeof lottie === 'undefined') {
        document.write('<script src="https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js"><\/script>');
      }
    </script>

</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="max-w-4xl w-full">
        <h1 class="text-2xl font-bold text-center mb-6">Lottie Animation on Canvas</h1>
        <div class="relative bg-white rounded-xl shadow-lg overflow-hidden">
            <!-- Canvas容器 -->
            <div id="lottie-container" class="w-full aspect-video bg-gray-50"></div>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取容器元素
            const container = document.getElementById('lottie-container');
            
            
            // 配置Lottie动画
            const animation = lottie.loadAnimation({
                container: container,    // 注意：这里传入Canvas元素
                renderer: 'canvas',   // 指定使用Canvas渲染
                loop: true,           // 循环播放
                autoplay: true,       // 自动播放
                path: 'http://localhost:8000/lottie/Animation1750837500866.json' // 示例动画URL
            });
            

        });
    </script>
</body>
</html>